import React from 'react';
import { useState, useCallback } from 'react';
// useCallback()
// 由于函数组件每当函数组件中的状态发生变化, 函数组件都会重复执行, 这样导致函数组件中
// 定义的方法 就会重复的创建, 浏览器就会开辟一个新的内存空间, 这样浪费性能, 所以希望
// 非必要条件下, 函数组件中的函数可以不用创建,有条件的创建

// 语法:
// const 函数名 = useCallBack(()=>{},[变量1,变量2])
// 参数1 就是 函数名对应的函数, 也就是要缓存的函数,
// 参数2: 数组, 参数1函数初始化创建, 当数组中变量发生变化, 参数1 对应的函数也会创建, 否则不创建

// 面试题? useMemo 和useCallback 的区别?
// 共同点: 都是做性能优化的
// 区别: useMemo 相当于计算属性, 用来缓存值的, usecallback 用来缓存函数的

const Father = () => {
    const [keywords, setKeywordsFn] = useState('');
    const [list, setList] = useState(['妈妈胎教', '宝宝故事会', '准妈妈食谱'])
    const [count, setCount] = useState(0)
    // 添加数据
    const addBookFn = useCallback(() => {
        console.log('keywords', keywords);
        list.push(keywords)
        setList([...list])
    }, [keywords])
    console.log('ok');
    return (
        <div>
            {/* count变量 */}
            <p onClick={() => {
                setCount(count + 1)
            }}>count:{count}</p>

            <p>
                <input value={keywords} type='text' onChange={(e) => {
                    setKeywordsFn(e.target.value)
                }} />
                <button onClick={() => addBookFn()}>添加</button>
            </p>
            <ul>
                {
                    list.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>

        </div>
    );
}

export default Father;
